<template>
	<view>

		<dsl-navbar title="选择团长" bgTopImg="white" isBack=""></dsl-navbar>
		<view class="rowsb padding" v-if="teams &&teams.length !=0">
			<view class="mt20 fs28 c333">历史团长</view>
			<view class="mt20 fs28 c333" @click="qingkong">清空历史团长</view>
		</view>
		<view v-if="teams &&teams.length !=0">
			<view class="tuanzhang-box row" v-for="(item,index) in teams" :key='item.id' @click="teamMen(item)">
				<image style="max-width: 200rpx;height: 200rpx;" :src="item.mainImg?item.mainImg:'/static/userImg.png'"
					mode="aspectFill" class="">
				</image>
				<view class="width-100 ml25 crowjb" style="height: 180rpx;">
					<view class="rowjbic">
						<view class="fs30 c333">{{item.name}}</view>
						<!-- <radio style="transform: scale(0.7);" /> -->
					</view>
					<view class="fs28 c888">距您{{item.distance}}km</view>
					<view class="rowic">
						<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_weizhi.png" mode="">
						</image>
						<view class="fs24 ml20 c999">{{item.location}}</view>
					</view>
				</view>
			</view>
		</view>

		<view style="padding: 20rpx;">
			<view class="rowjbic">
				<view class="fs28 c333">当前团长</view>
				<view class="rowic">
					<view class="mr20 fs28 c333">切换城市</view>
					<view>
						<view class="sheng-box rowjbic">
							<biaofun-region @changeEmit="changeRegion" :color="'black'" :placeholder="addressName" />
							<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_xiasi.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="tuanzhang-box row" v-for="(item,index) in teamList" :key='item.id' @click="teamMen(item)">
				<image style="max-width: 200rpx;height: 200rpx;" :src="item.mainImg?item.mainImg:'/static/userImg.png'"
					mode="aspectFill" class="">
				</image>
				<view class="width-100 ml25 crowjb" style="height: 180rpx;">
					<view class="rowjbic">
						<view class="fs30 c333">{{item.name}}</view>
						<!-- <radio style="transform: scale(0.7);" /> -->
					</view>
					<view class="fs28 c888">距您{{item.distance}}km</view>
					<view class="rowic">
						<image style="width: 20rpx;height: 20rpx;" src="/static/img/icon_weizhi.png" mode=""></image>
						<view class="fs24 ml20 c999">{{item.location}}</view>
					</view>
				</view>
			</view>


			<!-- <view class="rowjc">
				<view @click="goChangeTuanzhangPage" class="chooseTuanzhang">选择其他团长</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		captainList,
		get_captainSelectedRecord
	} from '../../../common/path.js'
	var QQMapWX = require('@/common/qqmap-wx-jssdk.js');
	var qqmapsdk = new QQMapWX({
		key: '32KBZ-MC6WU-DOZVZ-2ZUYK-H7NKV-VYF7L'
	});
	export default {
		data() {
			return {
				teamList: [], //团长列表
				selectRecordList: [], //历史团长列表
				isType: false, //默认不让选择团长
				region: [],
				teams: [], //历史团长
				pageData: 1, //分页
				addressName:'请选择',
				isADCODE:true, //判断是定位的还是选择的
			}
		},
		onShow() {
			let array = uni.getStorageSync('teams') ? uni.getStorageSync('teams') : []
			for (var i = 0; i < array.length - 1; i++) {
				for (var j = i + 1; j < array.length; j++) {
					if (array[i].id == array[j].id) {
						array.splice(j, 1);
						// console.log(array[i]);
						//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
						j--;
					}
				}
			}
			this.teams = array
			this.captainList()
		},
		onLoad(option) {
			if (option.type) {
				this.isType = true
				uni.removeStorage({
					key: 'team',
				});
				this.$tools.showToast('请选择团长')
			} else {
				this.isType = false
			}
		},
		watch:{
			isADCODE(event){
				console.log('[监听]',event);
			}
		},
		methods: {
			//选择省市区
			changeRegion(region) {
				this.addressName = region.name
				this.adcode = region.id
				this.pageData =1
				this.isADCODE = false
				this.captainList()
				console.log('[选择地址编码]', region);
				
			},
			
			// 触底
			onReachBottom(e) {
				this.pageData++
				this.captainList()
			},

			//清空历史团长
			qingkong() {
				uni.setStorageSync('teams', [])

				this.teams = []
			},
			//地址选择
			RegionChange(e) {
				this.region = e.detail.value
			},
			goChangeTuanzhangPage() { //更换团长
				uni.navigateTo({
					url: '/pages/my/classfity/chooseTuanzhang/ChangeTuanzhang/ChangeTuanzhang'
				})
			},
			//获取团长列表
			captainList(event) {
				let self = this
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					geocode: true,
					success: (res) => {
						self.team(res.latitude, res.longitude,event)
					},
					fail: (err) => {
						self.team(36.65184, 117.12009)
					}
				})
			},
			team(userLatitude, userLongitude,event) {
				console.log('[undefined]',this.isADCODE);
				let self = this
				let obj = {
					latitude: userLatitude,
					longitude: userLongitude
				}
				qqmapsdk.reverseGeocoder({
					location: obj || '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
					success: function(res) { //成功后的回调
						if (res.status == 0) {
							console.log('[条件是否成i]',self.isADCODE == true);
							if(self.isADCODE == true){
							console.log('[地/* */址]', res);
							console.log('[当前城市]',self.addressName);
								self.addressName = res.result.address_component.city
								console.log('[城市编码]', self.addressName); //地区编码
								self.adcode =  res.result.ad_info.adcode
								console.log('[self.adcode]',self.adcode);
							}else{
								
							}
							
							let data = {
								userLatitude: userLatitude,
								userLongitude: userLongitude,
								pageNum: self.pageData,
								pageSize: 20,
								cityCode:self.adcode
							}
							console.log('[资料]',data,self.adcode);
							self.Http.POST(captainList, data)
								.then((res) => {
									if (res.code == 0) {
										if (res.data) {
											if (self.pageData == 1) {
												self.teamList = res.data
											} else {
												self.teamList.push(...res.data)
											}
										}
										// console.log('[团长列表]', res);
									}
								})
						}
					},
					fail: function(error) {
						// console.log('[定位失败]', error);
					},
				})

			
			},
			//团长选择
			teamMen(item) {
				if (this.isType) {
					uni.setStorageSync('team', item)
					let array = uni.getStorageSync('teams') ? uni.getStorageSync('teams') : []

					for (var i = 0; i < array.length - 1; i++) {
						for (var j = i + 1; j < array.length; j++) {
							if (array[i].id == array[j].id) {
								array.splice(j, 1);
								// console.log(array[i]);
								//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
								j--;
							}
						}
					}
					array.push(item)
					uni.setStorageSync('teams', array)



					this.$tools.showToast('选择完成')
					setTimeout(r => {
						uni.navigateBack({
							delta: 1
						})
					}, 600)
				}

			},
			//历史选择团长
			get_captainSelectedRecord() {
				let data = {
					userId: uni.getStorageSync('userInfo').id
				}
				this.Http.POST(get_captainSelectedRecord, data)
					.then((res) => {
						if (res.code == 0) {
							console.log('[历史团长]', res);
							this.selectRecordList = res.data
						}
					})
			}
		}
	}
</script>

<style>
	.sheng-box {
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #CCCCCC;
		padding: 0rpx 10rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.tuanzhang-box {
		width: 710rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		height: 240rpx;
		padding: 20rpx 20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}

	.chooseTuanzhang {
		position: absolute;
		bottom: 100rpx;
		width: 500rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		background-color: #29EAC4;
		border-radius: 36rpx;
	}
</style>
